---
import { getCollection, render } from "astro:content";
import Base from "/components/Base.astro";
import Toolbar from "/components/Toolbar.astro";
import "/styles/main.css";

export async function getStaticPaths() {
  const posts = await getCollection("blog");
  return posts.map((post) => ({
    params: { slug: post.id },
    props: { post },
  }));
}

const { post } = Astro.props;
const { Content } = await render(post);
---

<Base
  title={`LOG_${post.data.pub.getFullYear()}-${post.data.pub.getMonth() + 1}-${post.data.pub.getDate()} | ${post.data.title}`}
  graph={{
    description: post.data.bio,
    type: "article",
  }}
>
  <Toolbar backlink="/blog" />
  <article class="bwcontainer">
    <header class="bwbox center">
      <h1>{post.data.title}</h1>
      <time
        class="barcodetext"
        datetime={`${post.data.pub.getFullYear()}-${post.data.pub.getMonth() + 1}-${post.data.pub.getDate()}`}
      >
        {
          `${post.data.pub.getFullYear()}-${post.data.pub.getMonth() + 1}-${post.data.pub.getDate()}`
        }
      </time>
    </header>
    <div class="bwbox">
      <Content />
    </div>
  </article>
</Base>

<style>
  h1 {
    margin-bottom: 13px;
  }

  time {
    font-weight: bold;
    font-size: 2.5rem;
  }

  article {
    max-width: 82ch;
    margin: 0 auto;
  }
</style>